<template>
    <div class="app">
        <div class="d1" v-for="item in data.val" :key="item">
            <van-row justify="space-around">
            <div class="d2">{{item.title}}</div>
            <div class="d3"><img class="i1" :src="item.img" ></div>
            </van-row>  
            
            <div class="d4" @click="dj1(item)"><img :src="src" ></div>
            <div class="d5">{{item.lovenum}}</div>
            <div class="d6"><img class="i2" src="@/assets/u1349.png" ></div>
            <div class="d7">{{item.leavemessage}}</div>
        </div> 
        <van-loading size="24px" type="spinner" class="v1">正在加载</van-loading>
    </div>

</template>

<script setup lang="ts">
import {beautifulpopularization} from "@/api/beautiful"
import { reactive, ref } from "vue";
let data=reactive({
    val:[]
})
let src =ref("/src/assets/u1246.png")
beautifulpopularization()
.then((res:any)=>{
    data.val = JSON.parse(JSON.stringify(res.data.data));
})
function dj1(item:any){
    if(src.value=="/src/assets/u1246.png"){
        item.lovenum=item.lovenum+1
        src.value="/src/assets/u1248.png"
    }else if(src.value=="/src/assets/u1248.png"){
        item.lovenum=item.lovenum-1
        src.value="/src/assets/u1246.png"
    }
}
</script>

<style scoped>
    .app{background: #fbf9f6;width: 390px;height:1350px;}
    .d1{background:white;width: 100%;margin-bottom: 3%;height: 120px;}
    .i1{width: 100px;height: 80px;border-radius: 5%;}
    .d2{padding-top: 5%;width: 220px;}
    .d3{margin-top: 5%;}
    .d4{width: 15px;height: 20px;margin-top: -8%;margin-left: 5%}
    .d5{margin-left:12% ;margin-top: -5.5%;}
    .d6{margin-left: 25%;margin-top: -5.5%;}
    .d7{margin-left: 32%;margin-top: -6.5%;}
    .v1{margin-left: 40%;}
</style>